<template>
    <div class="tabbar">
        <ul>
            <li
            v-for='(item,index) in routerList'
            :key='index'
            @click="switchTab(item.path)"
            >
                <!-- 点击图标变色 -->
                <img :src="$route.path.includes(item.path) ? item.selected : item.active" alt="">
                <span :class='$route.path.includes(item.path) ?  "active": "" ' >{{item.title}}</span>
            
            </li>
        </ul>
    </div>
</template>
<script>
export default{
    data(){
        return{
            routerList:[
                {
                title:'首页',
                path:'/home',
                active:'/images/home.png',
                selected:"/images/home-select.png",
            },
             {
                title:'消息',
                path:'/list',
                active:'/images/list.png',
                selected:"/images/list-select.png",
            },
             {
                title:'购物车',
                path:'/cart',
                active:'/images/cart.png',
                selected:"/images/cart-select.png",
            },
            
             {
                title:'我的',
                path:'/my',
                active:'/images/my.png',
                selected:"/images/my-select.png",
            }
            ]
        }
    },
    methods:{
        switchTab(path){
            //判断点击的是同一个路由
            if(this.$route.path==path)return;
            //对应跳转页面
            this.$router.replace(path);

        }
    }
}
</script>
<style scoped>
.tabbar{
    position: fixed;
    left:0;
    bottom: 0;
    z-index: 999;
    width: 100%;
    height: 65px;
    border-top:1px solid rgb(125, 168, 118) ;
    background-color: rgb(255, 255, 255);
   

}
.tabbar ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;

}
.tabbar ul li{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-direction: column;

    
}
.tabbar ul li img{
    
    width: 0.826666rem;
    height: 0.826666rem;
    
    
}
.tabbar ul li span{
    
    font-size: 13px;
     font-weight: bold; 
    
}
.active
{   
    color: rgb(255, 149, 0);
}
</style>
